<template>
	<view>
		<dsl-navbar title="申请区代理" bgTopImg="white" isBack=""></dsl-navbar>
		<form @submit="formSubmit">
			<view class="padding solid-bottom align-center rowsb">
				<view>真实姓名</view>
				<input type="text" value="" placeholder="暂未填写" name="name" />
			</view>
			<view class="padding solid-bottom align-center rowsb">
				<view>联系方式</view>
				<input type="text" value="" placeholder="暂未填写" name="mobile" maxlength="11" />
			</view>
			<view class="padding solid-bottom align-center rowsb">
				<view>区域选择</view>
				<view class="align-center" @click="longitudeMen">
					<image src="/static/img/icon_weizhi.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
					<text class="margin-left-sm">{{location ||'请选择'}}</text>
				</view>
			</view>

			<button form-type="submit">提交</button>
		</form>
	</view>
</template>

<script>
	var QQMapWX = require('@/common/qqmap-wx-jssdk.js');
	var qqmapsdk = new QQMapWX({
		key: '32KBZ-MC6WU-DOZVZ-2ZUYK-H7NKV-VYF7L'
	});
	import {
		updataImgList
	} from '@/common/updataImgList.js'
	import {
		applyAgent
	} from '@/common/path.js'
	export default {
		data() {
			return {
				mainImg: '', //图片
				location: '', //位置选择
				longitude: '', // 经度
				latitude: '', //纬度
				city: '', //省市区
				cityCode: '', //地区编码
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {},
		onShow() {},
		methods: {
			formSubmit(event) {
				let data = {
					city: this.city, //省市区
					cityCode: this.cityCode, //地区编码
					name: event.detail.value.name, //真实姓名
					mobile: event.detail.value.mobile, //联系方式
					userId: uni.getStorageSync('userInfo').id
				}
				if (data.mobile == '') {
					this.$tools.showToast('请填写联系方式')
					return
				}
				if (data.realName == '') {
					this.$tools.showToast('请填写真实姓名')
					return
				}
				if (this.location == '') {
					this.$tools.showToast('请选择地址')
					return
				}

				this.Http.POST(applyAgent, data)
					.then((res) => {
						console.log('[申请区域代理]', res);
						if (res.code == 0) {
							uni.showModal({
								title:'温馨提示',
								content:'申请成功请耐心等待'
							})
						
						} else if(res.code == 500){
							this.$tools.showToast('接口异常')
						}else{
							this.$tools.showToast(res.msg)
						}
					})
			},

			//经纬度
			longitudeMen() {
				let _this = this
				uni.chooseLocation({
					success: (res) => {
						let name = res.name
						let address = res.address
						let latitude = res.latitude
						let longitude = res.longitude
						console.log('[地址]', res);
						_this.location = address
						_this.latitude = latitude
						_this.longitude = longitude
						_this.team(latitude, longitude)
					}
				})
			},
			// 地图解析地区codeid
			team(latitude, longitude) {
				let _this = this
				let obj = {
					latitude: latitude,
					longitude: longitude
				}
				qqmapsdk.reverseGeocoder({
					location: obj || '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式
					success: function(res) { //成功后的回调
						if (res.status == 0) {
							console.log('[地/* */址]', res);
							let province = res.result.address_component.province //省
							let city = res.result.address_component.city //省
							let district = res.result.address_component.district //省
							_this.city = province + ',' + city + ','  + district
							_this.cityCode = res.result.ad_info.adcode //地区编码
						}
					},
					fail: function(error) {
						// console.log('[定位失败]', error);
					},
				})
			},

			//头像上传
			updataImgList() {
				updataImgList()
					.then((res) => {
						if (res.code == 0) {
							this.mainImg = res.data
							console.log('[图片]', res);
						}
					})

			},
		},
		computed: {},
		components: {}
	}
</script>

<style>
	input {
		text-align: right;
	}

	button {
		width: 499rpx;
		height: 78rpx;
		background: linear-gradient(180deg, #2AD5C9 0%, #35DCB5 100%);
		opacity: 1;
		border-radius: 46rpx;
		line-height: 78rpx;
		text-align: center;
		color: white;
		margin-top: 100rpx;
	}
</style>
